import { memo, useEffect } from 'react'
import { Evcs, setRate } from '../services'
import { Form, Input, InputNumber, Modal } from 'antd'
import { useRequest } from 'ahooks'

export interface SetRuleModalProps {
  record?: Evcs
  onCancel?: (refresh: boolean) => void
}

const SetRuleModal: React.FC<SetRuleModalProps> = props => {
  const [form] = Form.useForm()
  const { runAsync, loading } = useRequest(setRate, {manual: true})

  const onCancel = (refresh: boolean) => {
    form.resetFields()
    props.onCancel?.(refresh)
  }

  const onOk = () => {
    form.validateFields()
    .then((values: any) => {
      return runAsync(values)
    })
    .then(() => {
      onCancel(true)
    })
  }

  useEffect(() => {
    if (props.record) {
      form.setFieldsValue({
        platOrgId: props.record.orgId,
        feeModify: props.record.feeModify,
      })
    }
  }, [props.record])

  return (
    <Modal
      title='推送服务费比例'
      open={!!props.record}
      onCancel={() => onCancel(false)}
      onOk={onOk}
      confirmLoading={loading}
      destroyOnClose
    >
      <Form form={form} name='setRateForm'>
        <Form.Item name='platOrgId' noStyle><Input hidden /></Form.Item>
        <Form.Item label='比例' required style={{marginTop: 20}}>
          <Form.Item name='feeModify' rules={[{required: true, message: '请输入比例'}]} noStyle>
            <InputNumber min={0} precision={2} style={{width: '100%'}} placeholder='请输入' />
          </Form.Item>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default memo(SetRuleModal)
